<template>
  <view>
    <Navbar :hideBtn="false" bgColor="#f3f4f6"></Navbar>
    <view style="background-color: #2b85e4; padding: 40rpx;">
      <view style="width: 140rpx; height: 140rpx; border: 1px solid #fff; border-radius: 50%; margin: 0 auto;">
        <u-avatar size="120rpx" src="/static/img/avatar.png" style="margin: 10rpx;"></u-avatar>
      </view>
    </view>
    <view style="padding: 40rpx;">
      <u--form ref="uForm" :model="userInfo" labelAlign="left" labelWidth="160rpx">
        <u-form-item class="u-border-bottom" label="姓名" prop="nickName">
          <u--input v-model="userInfo.nickName" border="none" placeholder="请输入内容"></u--input>
        </u-form-item>
        <u-form-item class="u-border-bottom" label="性别" prop="sex">
          <u-radio-group v-model="userInfo.sex" size="36rpx">
            <u-radio label="男" labelSize="32rpx" name="1" shape="circle"></u-radio>
            <u-radio label="女" labelSize="32rpx" name="2" shape="circle"
                     style="margin-left: 36rpx;"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item class="u-border-bottom" label="手机号码" prop="phonenumber">
          <u--input v-model="userInfo.phonenumber" border="none" placeholder="请输入内容"></u--input>
        </u-form-item>
        <u-form-item class="u-border-bottom" label="邮箱" prop="email">
          <u--input v-model="userInfo.email" border="none" placeholder="请输入内容"></u--input>
        </u-form-item>
      </u--form>
    </view>
    <view style="padding: 40rpx;">
      <u-row gutter="32">
        <u-col span="6">
          <u-button icon="arrow-left" plain text="返回" @click="goBack()"></u-button>
        </u-col>
        <u-col span="6">
          <u-button icon="checkmark-circle" text="保存" type="primary"></u-button>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'

export default {
  components: {
    Navbar,
  },
  data() {
    return {
      userInfo: {
        nickName: '',
        sex: '',
        email: '',
        phonenumber: ''
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      const app = this
      app.$store.dispatch('Info').then(res => {
        app.userInfo.nickName = res.user.nickName
        app.userInfo.sex = res.user.sex
        app.userInfo.email = res.user.email
        app.userInfo.phonenumber = res.user.phonenumber
      })
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style lang="sass" scoped>

</style>